<template>
  <el-row>
    <el-col :span="6" class="logo">
      LOGO
    </el-col>
    <el-col :span="18" class="nav">
      <el-menu mode="horizontal" :default-active="active" :router="true" :ellipsis="false">
        <!-- 若存在多个组件依赖于同一个属性值则可以将它们包裹到一个 template 中 -->
        <template v-if="$root.loggedIn">
          <el-menu-item index="/list">列表</el-menu-item>
          <el-menu-item index="/add">添加</el-menu-item>
          <el-menu-item index="/set">设置</el-menu-item>
          <el-menu-item index="/sign/out">注销</el-menu-item>
        </template>
        <template v-else>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/sign/up">注册</el-menu-item>
          <el-menu-item index="/sign/in">登录</el-menu-item>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import {
  ElRow,
  ElCol,
  ElMenu,
  ElMenuItem
} from 'element-plus';

export default {
  name: 'HeaderView',
  data(){
    return {
      active: ''
    }
  },
  // 组件内守卫
  beforeRouteEnter (to, from, next) {
    next( vm => {
      // 通过 `vm` 访问组件实例
      vm.active = to.path;
      console.log( 'vm.active: ', vm.active );
    });
  },
  components: {
    ElRow,
    ElCol,
    ElMenu,
    ElMenuItem
  },
  created(){
    this.$root.loggedIn = !!sessionStorage.getItem('token');
    console.log( '[header created] loggedIn' , this.$root.loggedIn );
  },
  updated(){
    this.$root.loggedIn = !!sessionStorage.getItem('token');
    console.log( '[header updated] loggedIn' , this.$root.loggedIn );
  }
}
</script>

<style>
.logo {
  font-size: 3rem;
  line-height: 10vh;
}
.nav {
  text-align: right;
}
.nav>* {
  /* 让元素成为内联的Flex容器 */
  display: inline-flex;
  height: 10vh;
}
</style>